const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');

/***************解决跨域问题
 * 为什么会出现跨域？
 * //前端请求地址和后端服务器地址不同
 *   /如果二者： 域名，协议，端口号 有一个不相同，就会产生跨域问题
 *   /注意：本质上还是浏览器的同源策略(域名，协议，端口号 三者完全相同)
 * //解决方法
 *   1、前端用JSONP方式去发请求
     2、后端写代码(CORS)在响应中添加必要的响应头
     3、代理转发（前端操作，也就是本次的设置，它会本地电脑开启一个服务器进行代理）
 */

module.exports = {
    //     devServer: {
    //         port: 8081,//前端服务启动的端口号
    //         host: 'localhost',//前端服务启动后的访问ip，默认为localhost, host和port组成了前端服务启动后的访问入口。
    //         https: false,
    //         open: true, //每次运行项目会自动打开项目运行地址
    //         proxy: {
    //             '/api': {
    //                 target: '',        //代理目标地址，也就是请求的域名
    //                 changeOrigin: true, //是否跨域
    //                 ws: true,           //是否代理websockets
    //                 pathRewrite: {      //路径重置
    //                     '^/api': ''
    //                 }
    //             }
    //         }
    //     }
    configureWebpack: { //按需引入vant ui组件
        plugins: [
            ComponentsPlugin({
                resolvers: [VantResolver()],
            }),
        ],
    },
}